<template>
  <el-container style="height: 98vh; border: 1px solid #eee;background: #fff">
     <SideBar />
	 <el-container>

		<el-header style="width: 95%;margin-top: 10px;">
			<HeadBar />
		</el-header>

	    <el-main id="main">

			<div>
				<el-form :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="课程名">
						<el-input v-model="formInline.coursename" placeholder="课程名" clearable></el-input>
					</el-form-item>
					<el-form-item label="教师">
						<el-input v-model="formInline.teacher" placeholder="教师" clearable></el-input>
					</el-form-item>
					<el-form-item label="学期">
    					<el-select v-model="formInline.grade" placeholder="学期" clearable>
      						<el-option label="2024-2025学年第1学期" value="1"></el-option>
      						<el-option label="2024-2025学年第2学期" value="2"></el-option>
							<el-option label="2025-2026学年第1学期" value="3"></el-option>
      						<el-option label="2025-2026学年第2学期" value="4"></el-option>
							<el-option label="2026-2027学年第1学期" value="5"></el-option>
      						<el-option label="2026-2027学年第2学期" value="6"></el-option>
    					</el-select>
  					</el-form-item>
  					<el-form-item>
    					<el-button @click="getScoreByInfo" type="primary" round>查询成绩</el-button>
  					</el-form-item>
				</el-form>				
			</div>
			<div class="spacer"></div>

			<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"
			:default-sort = "{prop: 'grade', order: 'ascending'}" ref="filterTable" border height="88%">
				<el-table-column fixed prop="courseid" label="课程号">  </el-table-column>
				<el-table-column prop="coursename" label="课程名" > </el-table-column>
				<el-table-column prop="teacher" label="教师"> </el-table-column>
				<el-table-column prop="score" label="成绩" sortable>  </el-table-column>
				<el-table-column prop="grade" label="学期" sortable :formatter="formatGrade">  </el-table-column>
			</el-table>
	    </el-main>

	 </el-container>
  </el-container>
</template>


<script>
import SideBar from '@/components/SideBar.vue'
import HeadBar from '@/components/HeadBar.vue'
import request from "@/utils/request";

export default {
	components:{SideBar,HeadBar},
	data(){
		return{
			tableData: [],
			formInline: {
				studentId: null,
				coursename: null,
				teacher: null,
				grade: null
        	}
			
		}
	},
	created() {
		this.getStudentId()
  	},
	methods: {
		// 表格斑马纹
		tableRowClassName({row}) {
			if (row.score < 60){
				return 'wwwarning-row';
			}else if(row.score >= 60 && row.score < 80){
				return 'warning-row';
			}else if(row.score >= 80){
				return 'success-row';
			}
		},
		getStudentId(){
			const userInfo = JSON.parse(sessionStorage.getItem("user"))
			console.log(userInfo)
			this.formInline.studentId = userInfo?.data?.studentId || '未知用户'
		},
		getScoreByInfo(){
			// 过滤空参数
            const params = Object.fromEntries(
                Object.entries(this.formInline).filter(([, v]) => v != null && v !== '')
            );
            
            request.get("/course/getScoreByInfo", { params })
                .then(res => {
                    if (res.data.state == '0') {
						this.tableData = Array.isArray(res.data.data) ? res.data.data : [];
						if(JSON.stringify(this.tableData) != "[]"){
							this.$message({
								type: "success",
								message: "查询成功"
							})
						}else{
							this.$message({
								type: "error",
								message: "课程不存在"
							})
						}
                    } else {
                        this.$message({
							type: "error",
							message: "查询失败"
						})
                    }
                })
                .catch(err => {
                    this.$message.error("请求异常");
                    console.error("API Error:", err);
                });
			
		},
		// 学期映射
		formatGrade(row, column, cellValue) {
			const gradeMap = {
      		'1': '2024-2025学年第1学期',
      		'2': '2024-2025学年第2学期',
			'3': '2025-2026学年第1学期',
			'4': '2025-2026学年第2学期',
			'5': '2026-2027学年第1学期',
			'6': '2026-2027学年第2学期'
    		};
    		return gradeMap[cellValue] || cellValue;
  		}
	}
}
</script>

<style>
  .el-table .success-row {
    background: #ebf5f9;
  }
	.el-table .warning-row {
    background: #f9f6eb;
  }

  .el-table .wwwarning-row {
    background: #ef7c7c;
  }

  #main {
		width: 95%;
		margin-top: 30px;
		align-items: center; 
		box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
		margin-left: 50px
	}

	.spacer {
		height: 20px; 
	}

</style>